<template>
  <div class="app-container">
    <el-card>
      <div class="catalogue-box">
        <div class="app-container catalogue-left">
          <div style="margin-bottom: 10px">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="openAdd"
            >
              新增目录
            </el-button>
          </div>
          <el-tree
            :data="dataList"
            node-key="id"
            :props="{
              children: 'childList',
              label: 'name',
            }"
            :highlight-current="true"
            :default-expand-all="true"
            :expand-on-click-node="false"
            @node-click="nodeClick"
          >
            <span slot-scope="{ node, data }" class="custom-tree-node">
              <span>{{ node.label }}</span>
              <span class="custom-tree-node-set">
                <el-dropdown @command="(e) => changeButton(e, data)">
                  <i class="el-icon-s-tools"></i>
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item command="a">修改</el-dropdown-item>
                    <el-dropdown-item command="b">删除</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="catalogue-right">
          <List ref="listRef"></List>
        </div>
      </div>
    </el-card>
    <addCatalogue ref="addCatalogueRef" @load="getList">
      <p></p>
    </addCatalogue>
  </div>
</template>

<script>
  import List from './components/list.vue'
  import { depCategoryList, deleteCategory } from '@/api/dep/index.js'
  export default {
    components: {
      List,
      addCatalogue: () => import('./components/addCatalogue.vue'),
    },
    data () {
      return {
        dataList: [],
      }
    },
    created () {
      this.getList()
    },

    methods: {
      nodeClick (data) {
        this.$refs.listRef.getList(data.id)
      },
      async getList () {
        let data = await depCategoryList()
        console.log('目录', data)
        this.dataList = data.result
      },
      openAdd (item, type) {
        this.$refs.addCatalogueRef.applynewadd(item, type)
      },
      deleteCatalogue (row) {
        this.$confirm('是否确定删除此目录?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        })
          .then(async () => {
            try {
              let params = {
                id: row.id,
              }
              await deleteCategory(params)
              this.$message({
                message: '删除成功',
                type: 'success',
              })
              setTimeout(() => {
                this.getList()
              }, 500)
            } catch (error) {
              this.loading = false
            }
          })
          .catch(() => {})
      },
      changeButton (e, data) {
        if (e == 'b') {
          this.deleteCatalogue(data)
        } else if (e == 'a') {
          this.openAdd(data, 'edit')
        }
      },
    },
  }
</script>

<style scoped lang="scss">
  .catalogue-box {
    display: flex;

    .catalogue-left {
      width: 200px;
      margin-right: 20px;
    }

    .catalogue-right {
      flex: 1;
    }
  }

  .custom-tree-node {
    flex: 1;
    font-size: 14px;
    padding-right: 8px;
    position: relative;

    .custom-tree-node-set {
      position: absolute;
      right: 0;
      top: 0;
      // transform: translateY(-50%);
    }
  }
</style>
